import React, { Component } from 'react';
import './index.css';
export default class Item extends Component {
  // 标识鼠标移入、移出
  state = { mouse: false };

  // 鼠标移入、移出的回调
  handleMouse = (flag) => {
    return () => {
      this.setState({ mouse: flag });
    };
  };

  // 勾选，取消勾选某一个todo的回调
  handleChecked = (id) => {
    return (e) => {
      this.props.updateTodo(id, e.target.checked);
    };
  };

  //删除某一个todo的回调
  handleDelete = (id) => {
    if (window.confirm('确定要删除该任务嘛？')) {
      this.props.deleteTodo(id);
    }
  };
  render() {
    const { id, name, done } = this.props;
    const { mouse } = this.state;
    return (
      <li
        onMouseEnter={this.handleMouse(true)}
        onMouseLeave={this.handleMouse(false)}
        style={{
          backgroundColor: mouse ? '#dddddd' : '#fff',
          borderRadius: '0',
        }}
        className={done ? 'done' : ''}
      >
        <label>
          <input
            type='checkbox'
            checked={done}
            onChange={this.handleChecked(id)}
          />
          <span>{name}</span>
        </label>
        <button
          className='btn btn-delete'
          onClick={() => {
            this.handleDelete(id);
          }}
          style={{ display: mouse ? 'block' : 'none' }}
        >
          删除
        </button>
      </li>
    );
  }
}
